<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>excel翻译</title>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="../jqueryconfirm/jquery-confirm.min.css">
    <link rel="stylesheet" type="text/css" href="../json-viewer/jquery.json-viewer.css">
    <link rel="stylesheet" type="text/css" href="../webuploader-0.1.5/webuploader.css"  >
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <div class="_top_2">
        <ul id="_top_2_ul">
            <li id="_top_2_sy" onclick="tab_dh(this)" style="background-color: #82ACBB;">领域文档智能翻译</li>
        </ul>
    </div>
    <div style="padding-left: 10%;padding-top: 20px;">


        <div id="uploader_gzj" class="wu-example" >
            <div class="btns" style="width: 100%;float: left;">
                <div id="picker_gzj" style="width: 100px;float: left;">选择附件</div>
                <button class="btn btn-success" style="float: left;height: 34px;width: 86px;" onclick="initFy()">执行翻译</button>
                <div id="zhixingguocheng_cont" style="float: left;width: 400px;color: #4F4F4F;margin-left: 50px;background-color: #fff5d4;line-height: 36px;padding-left: 5px;">执行状态</div>
            </div>
            <br/>
            <!--用来存放文件信息-->
            <div id="thelist_gzj" class="uploader-list">

            </div>
            <table class="table">
                <caption>待翻译文件列表</caption>
                <thead>
                <tr>
                    <th>名称</th>
                    <th>大小</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="thelist_uploadfile_gzj">

                </tbody>
            </table>
        </div>
        <div>
            <table class="table">
                <caption>结果文件</caption>
                <thead>
                <tr>
                    <th>名称</th>
                    <th>大小</th>
                </tr>
                </thead>
                <tbody id="result_fanyi_content">

                </tbody>
            </table>


        </div>






    </div>
    <iframe src="./bottom.html"  marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" height="200px" style="margin-bottom:-5px;"  ></iframe>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.extend.date.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap-paginator.js"></script>
    <script type="text/javascript" src="../jqueryconfirm/jquery-confirm.min.js" ></script>
    <script type="text/javascript" src="../zTree_v3/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap-contextmenu.js"></script>
    <script type="text/javascript" src="../json-viewer/jquery.json-viewer.js"></script>
    <script type="text/javascript" src="../webuploader-0.1.5/webuploader.js"></script>
    <script type="text/javascript" src="../js/request.js"></script>
    <script type="text/javascript">
        var upload_file = webrootpath+"file/upload_file"; //上传文件
        var delAttached_link = webrootpath+"doc/delAttached_link"; //删除附件
        var initfanyilink = webrootpath+"zyyfanyiapi/initfanyilink";//执行翻译
        var initfanyistatuslink = webrootpath+"zyyfanyiapi/initfanyistatuslink";//执行翻译刷新状态
        var uploader = "";

        $(function () {
            loadUplad();
        });

        /****
         *  执行翻译
         * */
        function initFy() {
            var att_name_list = "";
            $("input[name='att_name']").each(function (_index,_this) {
                att_name_list+=","+_this.value;
            });
            if(att_name_list==""){
                alert("请上传翻译文件");
                return false;
            }

            var isjishi = setInterval(function () {
                get_initstatus();
            },3000);

            $.ajax({
                url:initfanyilink,
                data:{
                    att_name_list:att_name_list
                },
                type:"post",
                cache:false,
                async:true,
                dataType:"json",
                success:function(content){
                    console.log(content);
                    window.clearInterval(isjishi);
                    if(content.code=="1"){
                        var htmlstr = " <tr>\n" +
                            "<td><a href='"+content.data+"'>"+content.dataname+"</a></td>\n" +
                            "<td>"+content.datasize+"</td>\n" +
                            "</tr>";
                        $("#result_fanyi_content").html(htmlstr);
                    }else {

                        alert(content.msg);
                    }
                }
            });

        }
        /***
         * 刷新执行状态
         * */
        function get_initstatus(_random) {
            $.ajax({
                url:initfanyistatuslink,
                type:"post",
                cache:false,
                async:true,
                dataType:"json",
                success:function(_info){
                    if(_info.code=="1"){
                        $("#zhixingguocheng_cont").html(_info.msg);
                    }
                }
            });
        }
        /***
         * 批量导入规则（加载上传文件）
         */
        function  loadUplad() {
            $("#thelist_uploadfile_gzj").html("");
            $("#thelist_gzj").html("");

            uploader = WebUploader.create({
                swf: '../webuploader-0.1.5/Uploader.swf',
                auto:true,
                server: upload_file,
                pick: '#picker_gzj',
                resize: false,
                fileNumLimit:1,
                formData:{
                    filetype:10
                },
                accept:{
                    title: '文本内容',
                    extensions: 'xlsx',
                    mimeTypes: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                },
                fileSizeLimit:10485760000
            });
            uploader.on( 'fileQueued', function( file ) {

                $("#thelist_gzj").html( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
            });
            uploader.on( 'beforeFileQueued', function( file ) {
                uploader.reset();
            });

            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress .progress-bar');

                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中并正在处理，请稍等！！！');
                $percent.css( 'width', percentage * 100 + '%' );
            });
            //上传成功
            uploader.on( 'uploadSuccess', function( file,response ) {
                $( '#'+file.id ).find('p.state').text('上传完毕');
                setTimeout(function(){
                    $("#thelist").html("");
                    if(response.code=='1'){
                        var htmlstr = "<tr id=\"att"+response.data.attachedid+"\" >"+
                            "<td>"+response.data.truename+"<input name='att_name' value='"+response.data.attachedid+"' style='display: none;' /></td>"+
                            "<td>"+response.data.size+"</td>"+
                            "<td><span class=\"label label-danger\" style='cursor: pointer;'  onclick=\"delAttached('"+response.data.attachedid+"')\">删除</span></td>"+
                            "</tr>";

                        $("#thelist_uploadfile_gzj").append(htmlstr);
                    }
                    $("#thelist_gzj").html("");
                    uploader.reset();
                },1000);
            });
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
                uploader.reset();
            });
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });
        }

        /***
         *  删除附件
         */
        function delAttached(attachedid) {
            $.confirm({
                title:"提示",
                content:"您确认删除此附件吗？",
                buttons:{
                    "确定":function () {
                        $.get(delAttached_link,{attachedid:attachedid},function (msg) {
                            if (msg.code=='1'){
                                $("#att"+attachedid).remove();
                                $.confirm({
                                    title: '提示',
                                    content: '成功删除附件！',
                                    autoClose: '确定|2000',
                                    buttons: {
                                        确定: {
                                        }
                                    }
                                });
                            }
                        });
                    },
                    "取消":function () {

                    }
                }
            });
        }

    </script>



</body>
</html>